import React, { useEffect, useImperativeHandle } from 'react';
import useForm from 'rc-form-hooks';
import { connect } from 'dva';
import { Form, Input, Button, Select } from 'antd';
import './index.styl';
const { Option } = Select;

function HeadForm({ dispatch, getFormData, dictionaryList: { dicList }, runStatus, ledgerStatus, cRef }) {
  const { getFieldDecorator, values, resetFields, setFieldsValue, getFieldsValue } = useForm();
  useImperativeHandle(cRef, () => ({
    getFieldsValue,
    resetFields
  }));
  useEffect(() => {
    if (ledgerStatus !== undefined && runStatus !== undefined) {
      setFieldsValue({
        ledgerStatus: ledgerStatus,
        runStatus: runStatus,
      });
    }
  }, [runStatus, ledgerStatus, setFieldsValue]);
  useEffect(() => {
    dispatch({
      type: 'dictionaryList/getList',
    });
  }, [dispatch]);
  const handleSubmit = e => {
    e.preventDefault();
    getFormData(values);
  };

  // 重置
  const clearForm = () => {
    resetFields()
    setFieldsValue({
      runStatus: '',
      ledgerStatus: '',
    })
    dispatch({
      type: 'deviceLedger/updateSerachParams',
      payload: {
        serachParams: {
          current: 1
        }
      }
    })
  }


  return (
    <Form name="nest-messages" className="self-form deviceLedger_form" onSubmit={handleSubmit}>
      <div className="flex flex1">
        <Form.Item label="设备名称" colon={false}>
          {getFieldDecorator('deviceName', {
            initialValue: '',
            rules: [{ required: false }
            ],
          })(<Input 
          className="self-input" 
          placeholder="请输入" 
          />)}
        </Form.Item>
        <Form.Item label="设备编号" colon={false}>
          {getFieldDecorator('deviceNo', {
            initialValue: '',
            rules: [{ required: false }],
          })(<Input className="self-input" placeholder="请输入" />)}
        </Form.Item>
        <Form.Item label="责任人" colon={false}>
          {getFieldDecorator('chargePerson', {
            initialValue: '',
            rules: [{ required: false }],
          })(<Input className="self-input" placeholder="请输入" />)}
        </Form.Item>
        <Form.Item label="使用部门" colon={false}>
          {getFieldDecorator('groupName', {
            initialValue: '',
            rules: [{ required: false }],
          })(<Input className="self-input" placeholder="请输入" />)}
        </Form.Item>
      </div>
      <div className="flex">
        <Form.Item label="设备级别" colon={false}>
          {getFieldDecorator('deviceLevel', {
            rules: [{ required: false }],
          })(
            <Select
              placeholder="请选择"
              className="self-select"
              getPopupContainer={triggerNode => triggerNode.parentNode}
            >
              {dicList.deviceLevelList &&
                dicList.deviceLevelList.map(item => {
                  return (
                    <Option value={item.code} key={item.code}>
                      {item.desc}
                    </Option>
                  );
                })}
            </Select>
          )}
        </Form.Item>
        <Form.Item label="设备类型" colon={false}>
          {getFieldDecorator('deviceType', {
            rules: [{ required: false }],
          })(
            <Select
              placeholder="请选择"
              className="self-select"
              getPopupContainer={triggerNode => triggerNode.parentNode}
            >
              {dicList.deviceTypeList &&
                dicList.deviceTypeList.map(item => {
                  return (
                    <Option value={item.id} key={item.id}>
                      {item.name}
                    </Option>
                  );
                })}
            </Select>,
          )}
        </Form.Item>
        <Form.Item label="台账状态" colon={false}>
          {getFieldDecorator('ledgerStatus', {
            initialValue: '',
            rules: [{ required: false }],
          })(
            <Select placeholder="请选择" className="self-select" getPopupContainer={triggerNode => triggerNode.parentNode}>
              <Option value="">全部</Option>
              {dicList.planStatusList &&
                dicList.planStatusList.map(item => {
                  return (
                    <Option value={item.code} key={item.code}>
                      {item.desc}
                    </Option>
                  );
                })}
            </Select>,
          )}
        </Form.Item>
        <Form.Item label="运行状态" colon={false}>
          {getFieldDecorator('runStatus', {
            initialValue: '',
            rules: [{ required: false }],
          })(
            <Select placeholder="请选择" className="self-select" getPopupContainer={triggerNode => triggerNode.parentNode}>
              <Option value=''>全部</Option>
              {dicList.deviceRunStatusList &&
                dicList.deviceRunStatusList.map(item => {
                  return (
                    <Option value={item.code} key={item.code}>
                      {item.desc}
                    </Option>
                  );
                })}
            </Select>,
          )}
        </Form.Item>
        <Button className="blue-button btn_styls" htmlType="submit">
          查询
        </Button>
        <Button className="white-button" htmlType="reset" onClick={() => clearForm()}>
          重置
        </Button>
      </div>
    </Form>
  );
}

export default connect(({ deviceLedger, dictionaryList }) => ({
  deviceLedger,
  dictionaryList,
}))(HeadForm);